
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <input type="text" class="form-control search-input" placeholder="请输入要搜索的名字">
      </div>
      <input type="button" class="btn btn-default search-btn" value="搜索">
    </form>
  </div>
  <form  class="container">
     <label for="exampleInputText1" class="qwe">姓名</label>
    <input type="text" class="name"  placeholder="请输入名字"><br>
    <label for="exampleInputText1" class="qwe">电话</label>
    <input type="number" class="phone"  placeholder="请输入电话"><br>
    <label for="exampleInputText1" class="qwe">邮箱</label>
    <input type="email" class="email"  placeholder="请输入邮箱"><br>
    <input type="button" value="保存" class="save">
  </form>

  <div class="container">
    <table class="table table-bordered">
      <caption>表格增删改查</caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>电话</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">修改</h4>
        </div>
        <form class="modal-body">
          <div class="form-group">
            <label for="mname">姓名</label>
            <input type="text" class="form-control" id="mname" placeholder="请输入您的姓名">
          </div>
          <div class="form-group">
            <label for="mphone">电话</label>
            <input type="number" class="form-control" id="mphone" placeholder="请输入您的电话">
          </div>
          <div class="form-group">
            <label for="memail">邮箱</label>
            <input type="email" class="form-control" id="memail" placeholder="请输入您的邮箱">
          </div>
        </form>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary edit-save">保存</button>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="temp-tr">
    {{each xxx v i}}
    <tr>
      <td>{{v.name}}</td>
      <td>{{v.phone}}</td>
      <td>{{v.email}}</td>
      <td>
        <button class="del">删除</button>
        <button class="edit">修改</button>
      </td>
    </tr>
    {{/each}}
  </script>
  <!-- $.each(data, function(i, v){}) -->
  <!-- [].forEach(function(v, i){}) -->
  <script src="../lib/jquery/jquery-1.12.4.min.js"></script>
  <script src="../lib/art-template/template-web.js"></script>
  <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script>
    $(function () {
      // 展示所有数据
      var getAll = () => { 
        var all = localStorage.getItem('contacts');
        all = JSON.parse(all || '[]');
        var str = template('temp-tr', {xxx: all})
        $(".table tbody").html(str);
      }
      // 初始化执行
      getAll();
      // 保存事件
      $(".save").on("click", function(){
        var obj = {
          id: Math.ceil(Math.random() * 10000),
          name: $('.name').val(),
          phone: $('.phone').val(),
          email: $('.email').val(),
        }
        
        var all = localStorage.getItem('contacts');
        if(all){
          all = JSON.parse(all);
          all.push(obj);
          localStorage.setItem('contacts', JSON.stringify(all));
        }else{
          localStorage.setItem('contacts', JSON.stringify( [obj] ));
        }
        
        getAll();

      })

      // 事件代理绑定事件
      $(".table").on("click", ".del", function(){
        var tr = $(this).parent().parent();
        var all = JSON.parse( localStorage.getItem('contacts') );
        all.splice(tr.index(), 1);
        localStorage.setItem('contacts', JSON.stringify(all));
        tr.remove();
      })
      .on("click", ".edit", function(){
        var tr = $(this).parent().parent();
        var all = JSON.parse( localStorage.getItem('contacts') );
        var trData = all[tr.index()];
        trData.index = tr.index();
        sessionStorage.setItem('tr-data', JSON.stringify(trData));
        $('#modal-edit').modal('show');
      })

      $('#modal-edit').on('show.bs.modal', function (e) {
        var trData = JSON.parse( sessionStorage.getItem('tr-data') );
        $('#mname').val(trData.name);
        $('#mphone').val(trData.phone);
        $('#memail').val(trData.email);
      })
      // 修改的完成
      $(".edit-save").on("click", function(){
        var all = JSON.parse( localStorage.getItem('contacts') );
        var trData = JSON.parse( sessionStorage.getItem('tr-data') );
        var obj = {
          id: trData.id,
          name: $('#mname').val(),
          phone: $('#mphone').val(),
          email: $('#memail').val(),
        }
        all.splice(trData.index, 1, obj);
        localStorage.setItem('contacts', JSON.stringify(all));
        $('#modal-edit').modal('hide');
        // 刷新所有数据
        getAll();
      })
      
      // 搜索
      $(".search-btn").click(function(){
        var all = JSON.parse( localStorage.getItem('contacts') || '[]' );
        var val = $('.search-input').val();
        var arr = all.filter(v => {
          return v.name.indexOf(val) > -1 || v.phone.indexOf(val) > -1 || v.email.indexOf(val) > -1;
        });
        
        var str = template('temp-tr', {xxx: arr});
        $(".table tbody").html(str);
      })
    })
  </script>
</body>
</html>